<template>
  <el-dialog
    title="团购下单"
    :visible.sync="dialogVisible"
    width="350px"
    top="10%">
    <div id="group-order-join-dialog">
      <div>
        <el-button type="danger" size="small" @click="changeJoinType(0)">扫描二维码</el-button>
        <el-button type="success" size="small" @click="changeJoinType(1)">输入团购邀请码</el-button>
      </div>

      <div class="title-box">
        <div class="title">商品信息</div>
        <div class="item">
          <template v-if="productDetail.id===0">
            <div style="color: #AAAAAA; text-align: center; line-height: 30px;">
              暂未找到对应团购信息
            </div>
          </template>
          <template v-if="productDetail.id>0">
            <div class="product-name">
              <span>名称: {{ productDetail.name }}</span>
            </div>
            <img :src="productDetail.image" class="product-image"/>
            <div class="product-model">
              <span>型号: {{ productDetail.model }}</span>
            </div>
            <div class="product-price">
<!--              单购价格: <span v-text="'￥'+ToMoney(productDetail.price)"></span> |--> 拼团价格: <span v-text="'￥'+ToMoney(productDetail.groupPrice)"></span>
            </div>
          </template>
        </div>
        <div class="c"></div>
      </div>

      <div class="title-box" v-if="groupOrder.orderNo!==''">
        <div class="title">团购订单</div>
        <div class="item">
          <template v-if="productDetail.orderNo!==''">
            <div class="row">
              <div class="name">已经参与人数/总需人数:</div>
              <div class="value">
                <span v-text="groupOrder.currNums+'/'+groupOrder.groupNums"></span>
              </div>
            </div>
            <div class="row">
              <div class="name">剩余拼团时间:</div>
              <div class="value">
                <cutdown-box ref="cutdown-box" :curr-seconds="groupOrder.endTime"/>
              </div>
            </div>
            <div class="row">
              <div class="name">当前状态:</div>
              <div class="value">
                <el-tag effect="dark" v-text="groupOrder.status.name" :type="tagTypeArr[groupOrder.status.id]"></el-tag>
              </div>
            </div>
          </template>
        </div>
        <div class="c"></div>
      </div>

    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="danger" @click="createGroup" v-if="productDetail.id>0">自主开团</el-button>
      <el-button type="success" @click="joinGroup" v-if="groupOrder.orderNo!=='' && groupOrder.status.id===1">拼团加入</el-button>
    </div>
  </el-dialog>

</template>

<script>
import CutdownBox from './CutdownBox'
export default {
  name: 'GroupOrderJoinDialog',
  components: {CutdownBox},
  data: function () {
    return {
      callback: null,
      dialogVisible: false,
      isBinding: false,
      joinType: 0,
      tagTypeArr:['warning','success','','','danger'],
      productDetail: {
        shopId:0,
        shopName:0,
        shopLogo:0,
        id: 1,
        name: '',
        image: this.NoImageUrl,
        model: '',
        groupPrice: 0.00,
      },
      groupOrder: {
        orderNo: '',
        endTime: 99999,
        currNums: 0,
        needNums: 0,
        status:0,
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('GroupOrderJoinDialogCallBus', function (productDetail) {
      if (productDetail.invitationCode){
        $this.getGroupByOrderNo(productDetail.invitationCode)
      }
      if (productDetail && productDetail.id){
        $this.productDetail.id=productDetail.id
        $this.productDetail.name=productDetail.name
        $this.productDetail.image=productDetail.image
        $this.productDetail.model=productDetail.model
        $this.productDetail.price=productDetail.price
        $this.productDetail.groupPrice=productDetail.groupPrice
        $this.productDetail.shopId=productDetail.shopId
        $this.productDetail.shopName=productDetail.shopName
        $this.productDetail.shopLogo=productDetail.shopLogo
        $this.groupOrder={
          orderNo: '',
          endTime: 0,
          currNums: 0,
          needNums: 0,
          status:0,
        }
      }
      $this.dialogVisible = true
      $this.$forceUpdate()
    })

  },
  methods: {
    setCacheParams:function (type) {
      var selectData={
        shop:{
          id:this.productDetail.shopId,
          name:this.productDetail.shopName,
          logo:this.productDetail.shopLogo
        },
        productList:[
          {
            nums:1,
            model:this.productDetail.model,
            price:this.productDetail.groupPrice,
            name:this.productDetail.name,
            image:this.productDetail.image,
            id:this.productDetail.id
          }
        ]
      }
      localStorage.setItem("selectProductData",JSON.stringify(selectData))
    },
    createGroup:function () {
      // 自己开团
      this.setCacheParams('createGroup')
      this.$router.push({
        name: 'ConfirmOrder',
        query: {
          type: 'group',
          groupType:'createGroup',
        },
      })
      this.dialogVisible = false
    },
    joinGroup:function () {
      // 加入拼团
      this.setCacheParams('joinOther')
      this.$router.push({
        name: 'ConfirmOrder',
        query: {
          type: 'group',
          groupType:'joinGroup',
          groupOrderNo:this.groupOrder.orderNo
        },
      })
      this.dialogVisible = false
    },
    confirm: function () {
      if (typeof this.callback === 'function') {
        this.callback(this.submitType)
        this.dialogVisible = false
      }
    },
    changeJoinType: function (joinType) {
      let $this = this
      if (joinType === 0) {
        alert('扫描二维码')
      }
      if (joinType === 1) {
        this.$prompt('请输入 团购邀请码', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d{6,10}$/,
          inputErrorMessage: '团购邀请码 不正确'
        }).then(({value}) => {
          $this.getGroupByOrderNo(value)
          // alert('查询团购信息: ' + orderNo)
        })
      }
    },
    getGroupByOrderNo: function (invitationCode) {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Order/getGroupOrderByInvitationCode', {
        invitationCode: invitationCode
      }, function (data) {
        $this.groupOrder.orderNo = data.orderNo
        $this.groupOrder.groupNums = data.groupNums
        $this.groupOrder.currNums = data.currNums
        $this.groupOrder.status = data.status
        if (data.status.id!==1){
          data.endTime=0
        }
        $this.groupOrder.endTime =  Math.ceil(data.endTime)
        // $this.groupOrder.endTime = Math.ceil(data.endTime)

        $this.productDetail.id = data.productId
        $this.productDetail.name = data.productName
        $this.productDetail.image = data.productImage
        $this.productDetail.groupPrice = data.productPrice
        $this.productDetail.model = data.productModel

        $this.productDetail.shopId = data.shopId
        $this.productDetail.shopName = data.shopName
        $this.productDetail.shopLogo = data.shopLogo

        // $this.shop = data
        $this.$forceUpdate()
        setTimeout(function () {
          if ($this.$refs['cutdown-box'].setCurrSeconds){
            $this.$refs['cutdown-box'].setCurrSeconds(Math.ceil(data.endTime))
          }
        },500)
      }, function (data) {
        $this.successTip(data.message, 'error')
      })
    }
  }
}
</script>

<style scoped>

</style>
